<template>
    <section class="VideoExhibitionDetails-box">
        <app-header ref="header"></app-header>

        <!--中间内容-->
        <div class="content">
            <div class="container">
                <a-breadcrumb class="breadcrumb-box">
                    <a-breadcrumb-item><router-link to="/" title="首页" alt="首页">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link to="/Video" title="海外直播" alt="海外直播">海外直播</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link :to="{path: 'VideoSecondaryList', query: {type: 1 }}" title="展会活动视频" alt="展会活动视频">展会活动视频</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>详情页</a-breadcrumb-item>
                </a-breadcrumb>
                <article class="main-content clearfix">
                    <h1>{{ isNull0(videoDetailsData.title) }}
                        <span><i class="iconfont icon-yanjing2"></i> {{ isNull0(videoDetailsData.pageView) }}人观看</span>
                    </h1>
                    <a-row :gutter="32">
                        <a-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="left-box" v-show="isLoggedIn">
                            <div v-html="videoDetailsData.video" v-if="videoDetailsData.video" class="video-box"></div>
                            <aside v-else class="audio-box" :style="{background: 'url('+ videoDetailsData.photo +') no-repeat center center'}">
                                <div class="inside">
                                    <div class="audio-inline">
                                        <div v-html="videoDetailsData.audio"></div>
                                        <!--<iframe height="230" width="260" src="https://www.ximalaya.com/thirdparty/player/album/player.html?id=7284249&type=red" frameborder=0 allowfullscreen></iframe>-->
                                    </div>
                                </div>
                            </aside>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="left-box" v-show="!isLoggedIn">
                            <article class="NotLoggedIn-box">
                                <img src="/static/img/NotLoggedIn-lock2.svg" alt="">
                                <p>更多信息请您 <a @click="cell_header_handleLoginModal">登录</a> 后查看</p>
                            </article>
                            <div class="NotLoggedIn-box-bg">
                                <img src="/static/img/VideoDetails-NotLoggedIn-bg.jpg" alt="">
                            </div>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="right-box">
                            <header class="webkit-text-overflow-1lines">{{ isNull0(videoDetailsData.title) }}</header>
                            <p><span>时间</span> {{ isNull0(videoDetailsData.activityTime) }}</p>
                            <p><span>地点</span> {{ isNull0(videoDetailsData.activityAddress) }}</p>
                            <p><span>主持人</span> {{ isNull0(videoDetailsData.activitySpeaker) }}</p>
                            <aside class="Video-exhibition-list">
                                <router-link to="/Exhibition" class="goExhibition" title="查看往期精彩展会活动" alt="查看往期精彩展会活动"><i class="iconfont icon-huodong"></i> 查看往期精彩展会活动</router-link>

                                <router-link v-for="(item, index) in RecommendExhibitionListData" :key="index" :to="{path: 'ExhibitionDetails', query: {exhibitionId: item.id }}" v-show="!RecommendExhibition_noDataShow" :title="item.title" :alt="item.title">
                                    <a-row :gutter="20" class="webkit-text-overflow-1lines">
                                        <a-col :span="18" class="webkit-text-overflow-1lines">
                                            <i class="iconfont icon-video"></i> {{ isNull0(item.title) }}
                                        </a-col>
                                        <a-col :span="6" style="text-align: right;">
                                            <span>{{ isNull0(item.activityTime) }}</span>
                                        </a-col>
                                    </a-row>
                                </router-link>

                                <h5 style="text-align: center; padding: 15px;" v-show="RecommendExhibition_noDataShow">暂未查询到数据！</h5>
                            </aside>
                        </a-col>
                    </a-row >
                </article>

            </div>
        </div>
        <!--猜你喜欢展会活动视频-->
        <div class="recommend-exhibitionVideo-box">
            <div class="container">
                <header class="clearfix">猜你喜欢 <router-link :to="{path: 'VideoSecondaryList', query: {type: 1 }}" class="right" title="查看更多展会活动视频" alt="查看更多展会活动视频">更多></router-link></header>
                <a-row :gutter="32" v-show="!noDataShow">
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="aside" v-for="(item, index) in RecommendVideoItem" :key="index">
                        <a-card :title="null" hoverable :loading="recommendVideoListLoading">
                            <router-link :to="{path: 'VideoExhibitionDetails', query: {videoId: item.id }}" :title="item.title" :alt="item.title">
                                <img v-lazy="item.photo" :title="item.title" :alt="item.title"/>
                                <div class="font">
                                    <i class="iconfont icon-xuanchuanshipin"></i>
                                </div>
                                <p class="webkit-text-overflow-1lines">{{isNull0(item.title)}}</p>
                            </router-link>
                            <div class="bottom transition">
                                <p class="webkit-text-overflow-1lines">
                                    <span><i class="iconfont icon-dingwei1"></i> {{isNull0(item.activityAddress)}}</span>
                                    <span><i class="iconfont icon-msnui-time-detail"></i> {{isNull0(item.activityTime)}}</span>
                                </p>
                                <p class="webkit-text-overflow-1lines">
                                    <span><i class="iconfont icon-yanjing2"></i> {{isNull0(item.pageView)}}人观看</span>
                                </p>
                            </div>
                        </a-card>
                    </a-col>
                </a-row>
                <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
            </div>
        </div>
        <!--中美置业团队-->
        <consultantTeam></consultantTeam>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import consultantTeam from '../../components/consultantTeam.vue';//公共组件——中美置业团队
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                isLoggedIn: false,//用户是否登录

                videoId: this.$route.query.videoId, // 视频id
                videoDetailsData: {}, // 视频详情数据
                noDataShow: false,//没有数据提示信息是否显示
                RecommendVideoItem:[], // 猜你喜欢推荐视频数据
                recommendVideoListLoading: true, //猜你喜欢——列表加载loading
                RecommendExhibitionListData:[],//推荐展会活动列表数据
                RecommendExhibition_noDataShow: false,//推荐展会活动——没有数据提示信息是否显示

                metaInfo_title: '',//vue-meta动态管理头部标签-title
                metaInfo_keywords: '',//vue-meta动态管理头部标签-keywords
                metaInfo_description: '',//vue-meta动态管理头部标签-description

            }
        },
        metaInfo () {
            return {
                title: this.metaInfo_title,
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: this.metaInfo_keywords },
                    { vmid: 'description', name: 'description', content: this.metaInfo_description },
                ],
            }
        },
        computed: {},
        created() {
        },
        beforeRouteUpdate(to, from, next){
            next();
            // console.log(to, from, next)

            //判断是否是从展会活动视频详情页跳转进来，并且过滤判断hash值，即#后边的值（防止点击楼层导航触发beforeRouteUpdate，而造成发送下面两个接口）
            if(to.path == '/VideoExhibitionDetails' && to.hash == ''){
                this.videoId = to.query.videoId;
                //更新视频详情数据
                this.getVideoDetailsData();
            }
        },
        mounted() {
            //获取视频详情数据
            this.getVideoDetailsData ();
            //获取推荐展会活动列表数据
            this.getRecommendExhibitionData();
            //获取猜你喜欢推荐视频数据
            this.getRecommendVideoData();
            //判断用户是否登录
            if(this.$store.getters.get_user.name != '' && this.$store.getters.get_user.headPhoto != ''){
                this.isLoggedIn = true;
            }else{
                this.isLoggedIn = false;
            }
        },
        methods: {
            // 获取视频详情数据
            getVideoDetailsData() {
                this.$get(`/video/detail/${this.videoId}`).then(res => {
                    if (res.status === 0) {
                        this.videoDetailsData = res.data;
                        this.metaInfo_title = res.data.seoTitle;
                        this.metaInfo_keywords = res.data.seoKeyword;
                        this.metaInfo_description = res.data.seoDescription;
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            // 获取推荐展会活动列表数据——全部0、往期1、近期2
            getRecommendExhibitionData() {
                this.$get('/expo/list/1/1/5?isRecommend=true').then(res => {
                    if (res.status === 0) {
                        this.RecommendExhibitionListData = res.list;
                        this.RecommendExhibition_noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.RecommendExhibition_noDataShow = true;
                    }
                })
            },
            // 获取猜你喜欢推荐视频数据
            getRecommendVideoData() {
                this.$get('/video/list/1/1/10?isRecommend=true').then(res => {
                    this.recommendVideoListLoading = false;
                    if (res.status == 0) {
                        this.RecommendVideoItem = res.list.splice(0, 3);
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                })
            },
            //触发公共登录modal框
            cell_header_handleLoginModal(){
                this.$refs.header.$emit('header_handleLoginModal');
            },

        },
        components: {
            'app-header': Header,//公共组件——头部
            consultantTeam,//公共组件——中美置业团队
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        background: #f4f4f4;
        .VideoExhibitionDetails-box {
            .content {
                padding: 50px 0;
                background: #05263a;
                > .container {
                    >.breadcrumb-box{
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ddd;
                        margin-bottom: 20px;
                        color: #fff;
                        a,
                        span,
                        .ant-breadcrumb-separator{
                            font-size: 16px;
                            color: #fff;
                        }
                    }
                    >.main-content{
                        >h1{
                            margin: 12px 0 40px 0;
                            font-size: 25px;
                            color: #fff;
                            >span{
                                font-size: 14px;
                                margin: 0 0 0 40px;
                            }
                        }
                        >.ant-row{
                            padding: 0 0 0 38px;
                            >.left-box{
                                padding: 0;
                                position: relative;
                                >.NotLoggedIn-box{
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    text-align: center;
                                    /*display: flex;*/
                                    /*display: -webkit-flex;*/
                                    /*align-items: center;*/
                                    /*justify-content: center;*/

                                    display: table-cell;
                                    vertical-align: middle;

                                    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 60%);
                                    background-color: rgba(255, 255, 255, .7);
                                    z-index: 9;
                                    >img{
                                        display: inline-block;
                                        width: 120px;
                                        margin: 100px 0 0 0;
                                    }
                                    >p{
                                        display: block;
                                        font-size: 16px;
                                        margin: 15px 0;
                                    }
                                    >.NotLoggedIn-box-bg{
                                        >img{
                                            width: 100%;
                                            min-height: 280px;
                                            max-height: 440px;
                                        }
                                    }
                                }
                                >.video-box{
                                    padding: 0;
                                    embed{
                                        width: 100%!important;
                                        min-height: 280px;
                                        max-height: 440px;
                                    }
                                    iframe{
                                        width: 100%!important;
                                        min-height: 280px!important;
                                        max-height: 440px!important;
                                    }
                                }
                                >.audio-box{
                                    width: 100%;
                                    height: 418px;
                                    background-size: cover !important;
                                    >.inside{
                                        background: rgba(0,0,0,.3);
                                        width: 100%;
                                        height: 100%;
                                        display: flex;
                                        flex-direction: column;/* 灵活的项目将垂直显示 */
                                        justify-content: center;/* 弹性盒子元素在横向上的对齐方式 */
                                        >.audio-inline{
                                            display: inline;
                                            text-align: center;
                                            iframe{
                                                height: 100% !important;
                                            }
                                        }
                                    }
                                }
                            }
                            >.right-box{
                                text-align: left;
                                color: #fff;
                                >header{
                                    padding: 0 0 14px 0;
                                    font-size: 20px;
                                    border-bottom: 1px solid #fff;
                                    >span{
                                        margin: 0 12px;
                                    }
                                    >span:first-of-type{
                                        margin: 0 12px 0 0;
                                    }
                                }
                                >p{
                                    margin: 20px 0;
                                    font-size: 16px;
                                    overflow: hidden;
                                    >span{
                                        background: #f85148;
                                        padding: 6px;
                                        position: relative;
                                        margin: 0 32px 0 0;
                                    }
                                    >span:before{
                                        clear: both;
                                        display: inline-block;
                                        border: 14px solid transparent;
                                        border-left: 14px solid #f85148;
                                        font-size: 0;
                                        line-height: 0px;
                                        width: 0;
                                        height: 0;
                                        position: absolute;
                                        top: 0;
                                        right: -28px;
                                        content: ' ';
                                        z-index: 999;
                                    }
                                }
                                >p:first-of-type{
                                    margin: 20px 0 0 0;
                                }
                                >.Video-exhibition-list{
                                    padding: 12px 0 0 0;
                                    border-top: 1px dashed #ccc;
                                    >a{
                                        display: block;
                                        margin: 4px 0;
                                        line-height: 30px;
                                        color: #c9cbca;
                                    }
                                    >a:hover {
                                        color: #00b8ee;
                                    }
                                    >.goExhibition{
                                        text-align: right;
                                        >i{
                                            color: #3cd0c5;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

            }
            /* 猜你喜欢展会活动视频 */
            .recommend-exhibitionVideo-box{
                padding: 50px 0;
                > .container {
                    padding: 0;
                    >header{
                        font-size: 20px;
                        text-align: center;
                        line-height: 40px;
                        >a{
                            font-size: 14px;
                            color: #000;
                        }
                    }
                    >.ant-row{
                        >.aside{
                            margin: 20px 0;
                            .ant-card {
                                border: none;
                                background: #f7f9fa;
                                -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                > .ant-card-body {
                                    padding: 0;
                                    > a {
                                        display: block;
                                        width: 100%;
                                        height: 100%;
                                        position: relative;
                                        overflow: hidden;
                                        background: #000;
                                        > img {
                                            width: 100%;
                                            height: 250px;
                                            -webkit-transition: all linear 1s;
                                            -moz-transition: all linear 1s;
                                            transition: all linear 1s;
                                        }
                                        > .font {
                                            width: 100%;
                                            height: 100%;
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            text-align: center;
                                            > i {
                                                font-size: 30px;
                                                color: #fff;
                                                position: absolute;
                                                top: 43%;
                                                left: 45%;
                                                z-index: 9;
                                                text-align: center;
                                                -webkit-border-radius: 50%;
                                                -moz-border-radius: 50%;
                                                border-radius: 50%;
                                                box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                display: inline-block;
                                                opacity: 0;
                                                -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                                                -moz-transition: -moz-transform 0.3s, opacity 0.3s;
                                                -o-transition: -o-transform 0.3s, opacity 0.3s;
                                                transition: transform 0.3s, opacity 0.3s;
                                            }
                                        }
                                        > p {
                                            width: 100%;
                                            position: absolute;
                                            bottom: 0;
                                            background: rgba(0, 0, 0, .4);
                                            color: #fff;
                                            padding: 0 0 0 12px;
                                            margin-bottom: 0px;
                                        }
                                    }
                                    > a:hover {
                                        > img {
                                            -webkit-transform: scale(1.1, 1.1);
                                            -moz-transform: scale(1.1, 1.1);
                                            transform: scale(1.1, 1.1);
                                            opacity: 0.5;
                                            filter: alpha(opacity=50);
                                        }
                                        > .font {
                                            > i {
                                                opacity: 1;
                                                -webkit-transform: scale(1);
                                                -moz-transform: scale(1);
                                                -ms-transform: scale(1);
                                                -o-transform: scale(1);
                                                transform: scale(1);
                                            }
                                        }
                                    }
                                    .bottom {
                                        padding: 10px 20px;
                                        border: 1px solid #eaebea;
                                        background: #fff;
                                        > p {
                                            > span {
                                                margin: 0 8px;
                                            }
                                            > span:first-of-type {
                                                margin: 0 8px 0 0;
                                            }
                                            margin-bottom: 0px;
                                        }
                                    }
                                }
                            }
                        }
                        .aside:hover{
                            >.ant-card{
                                -webkit-box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                                -moz-box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                                box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
